<template>
    <div>
        <h1>Hello Index</h1>
        <!-- 动态路由参数 -->
        <NuxtLink to="/parent/child?id=123">子级</NuxtLink><br />
        <!-- 动态路由参数 -->
        <NuxtLink to="/users-admin/7">用户详情</NuxtLink><br />
        <a-button type="primary" @click="toAbout">关于</a-button><br />
        <!-- 具名路由中间件 -->
        <NuxtLink to="/middleware">中间件</NuxtLink><br />
        <!-- 匿名路由中间件 -->
        <NuxtLink to="/unkonwMiddleware">未知中间件</NuxtLink><br />
        <HelloWorld />

        <a-button type="primary" @click="info">Display normal message</a-button>
        <br />
        <a-button type="primary" @click="increment">增加</a-button><br />
        <p>当前计数: {{ myStore.count }}</p>
        <p>当前计数乘2: {{ doubleCount }}</p>
    </div>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router'
import { ref } from 'vue'

const userInfo = ref({
    name: '张三',
    age: 18
})
const router = useRouter()

function toAbout() {
    router.push({
        path: '/about',
        query: userInfo.value
        // {
        //     // name: '张三'
        //     userInfo: JSON.stringify(userInfo.value)
        // }
    })
}

const $myPlugins = useNuxtApp().$myPlugins
const messageApi = useNuxtApp().$message

onMounted(() => {
    console.log($myPlugins('plugins'))
})

const info = () => {
    messageApi.info('Hello, Ant Design Vue!');
};

import { useMyStore } from '@/store/myStore'

const myStore = useMyStore()

const doubleCount = computed(() => myStore.doubleCount)

const increment = () => {
    myStore.increment()
}
</script>
